<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
	

<title>Membuat Tombol Button</title>
 
<link rel='stylesheet' type='text/css' href='http://upzzzt.googlecode.com/svn/trunk/css/style.css' />
<link rel='stylesheet' type='text/css' href='http://upzzzt.googlecode.com/svn/trunk/css/colorpicker.css' />
<link rel='stylesheet' type='text/css' href='http://upzzzt.googlecode.com/svn/trunk/css/ui-modifikasi.css'/>

<script type='text/javascript' src='http://upzzzt.googlecode.com/svn/trunk/js1/jquery-1.6.1.min.js'></script>
<script type='text/javascript' src='http://upzzzt.googlecode.com/svn/trunk/js1/jqueryui-1.8.1.min-modifikasi.js'></script> 
<script type='text/javascript' src='http://upzzzt.googlecode.com/svn/trunk/js1/colorpicker.js'></script>
<script type='text/javascript' src='http://upzzzt.googlecode.com/svn/trunk/js1/buttonmaker.js'></script>
</head>

<body>

<div id="page-wrap">
<h1>CSS3 Button Generator</h1>
<div id="float-left">
<div id="button-box">
<button class="tombol">Perlihatkan Kode CSS</button>

</div>

<h2>Variabel Ukuran</h2>
<div class="sliderBar" id="font-sizer" title="Besar Teks"></div>
<div class="sliderBar" id="sizer" title="Padding Tombol"></div>
<div class="sliderBar" id="penebal-border" title="Tebal Border"></div>
<div class="sliderBar" id="border-rounder" title="Radius Border"></div>
<div class="sliderBar" id="bayangan" title="Blur Bayangan Tombol"></div>
<h2>Opsi Lain</h2>
<table border='0'>
<tr><td>Jenis Font:</td><td><select id="fontSelector">
<option selected="selected" value="Calibri, Arial, Sans-Serif">Calibri</option>
<option value="Arial, Sans-Serif">Arial</option>
<option value="Helvetica, Arial, Sans-Serif">Helvetica</option>
<option value="Georgia, Serif">Georgia</option>
<option value="Times, Serif">Times New Roman</option>
<option value="Comic Sans MS, Serif">Comic Sans MS</option>
<option value="Verdana, Arial, Serif">Verdana</option>
<option value="Monospace, Serif">Monospace</option>
<option value="'Lucida Grande', Helvetica, Arial, Sans-Serif">Lucida Grande</option>
</select></td></tr>
<tr><td>Berat Font:</td><td><select id="fontWeight">
<option selected="selected" value="normal">Reguler</option>
<option value="bold">Bold</option>
<option value="italic">Italic</option>
</select></td></tr>
<tr><td>Tipe Border:</td><td><select id="borderStyleSelector">
<option selected="selected" value="solid">Solid</option>
<option value="double">Double</option>
<option value="dashed">Dashed</option>
<option value="dotted">Dotted</option>
<option value="outset">Outset</option>
<option value="inset">Inset</option>
<option value="ridge">Ridge</option>
<option value="groove">Groove</option>
</select></td></tr>
<tr><td>Box Shadow:</td><td><select id="boxShadow">
<option selected="selected" value="">Outset</option>
<option value="inset ">Inset</option>
</select></td></tr>
<tr><td>Dimensi Teks:</td><td><select id="textShadow">
<option selected="selected" value="rgba(0, 0, 0, 0.5)">Normal/Cembung</option>
<option value="rgba(255, 255, 255, 0.5)">Cekung</option>
</select></td></tr>
</table>
</div>      

     
<div id="controls">
<div id="scrollbar">

            
<div id="colors">
<h2>Tentukan Warna</h2>
<h3>Normal:</h3>
<div class='hompi-warna'><label for="topGradientValue">Warna Gradien Atas</label>
<input type="text" maxlength="6" size="6" id="topGradientValue" class="pickable" rel="backgroundTop" value="648632" style="background: #648632;" /></div>
                
<div class='hompi-warna'><label for="bottomGradientValue">Warna Gradien Bawah</label>
<input type="text" maxlength="6" size="6" id="bottomGradientValue" class="pickable" rel="backgroundBottom" value="416B00" style="background: #416B00;" /></div>

<div class='hompi-warna'><label for="borderColorValue">Warna Border</label>
<input type="text" maxlength="6" size="6" id="borderColorValue" class="pickable" rel="borderColor" value="3F6124" style="background: #3F6124;" /></div>

<div class='hompi-warna'><label for="textColor">Warna Teks</label>
<input type="text" maxlength="6" size="6" id="textColor" class="pickable" rel="textColor" value="ffffff" style="background: #ffffff;" /></div>
<h3>Hover:</h3>

<div class='hompi-warna'><label for="hoverBackgroundColorTopValue">Warna Gradien Atas Hover</label>
<input type="text" maxlength="6" size="6" id="hoverBackgroundColorTopValue" class="pickable" rel="hoverBackgroundTop" value="A2110C" style="background: #A2110C;" /></div>

<div class='hompi-warna'><label for="hoverBackgroundColorBottomValue">Warna Gradien Bawah Hover</label>
<input type="text" maxlength="6" size="6" id="hoverBackgroundColorBottomValue" class="pickable" rel="hoverBackgroundBottom" value="750A00" style="background: #750A00;" /></div>

<div class='hompi-warna'><label for="borderHoverColorValue">Warna Border Hover</label>
<input type="text" maxlength="6" size="6" id="borderHoverColorValue" class="pickable" rel="borderHoverColor" value="5c0805" style="background: #5c0805;" /></div>

<div class='hompi-warna'><label for="hoverTextColorValue">Warna Teks Hover</label>
<input type="text" maxlength="6" size="6" id="hoverTextColorValue" class="pickable" rel="hoverColor" value="ffffff" style="background: #ffffff;" /></div>
<h3>Bayangan:</h3>
<div class='hompi-warna'><label for="bayangColor">Warna Bayangan</label>
<input type="text" maxlength="6" size="6" id="bayangColor" class="pickable" rel="warnaBayang" value="444444" style="background: #444444;" /></div>
</div>

</div>

<span class='author'>Konsep Aplikasi Online <a href='http://www.upzzzz.com/'>Upzzzz</a>, 09 10 2013</span>
          
</div>
<div style='clear:both;'></div>
</div>
<div id="the-css"></div>

</body>

</html>
